<template>
  <div class="container">
    <h2>name: {{ name }} age: {{ age }}</h2>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })

    // !解构出来的简单数据类型，丢失了响应式
    let { name, age } = obj

    const updateName = () => {
      name = 'xxx'
    }
    return { name, age, updateName }
  },
}

/* const o = { age: 18 }
// 把 o 中的 age 完全复制了一份给了变量 age，这个 age 和原来没关系了
let { age } = o
age = 19
console.log(o.age) */
</script>